import React from 'react';

export default function LoginDemo() {

    return <div className=" bg-gray-900 w-full h-screen text-cyan-400 flex justify-center items-center">
        <div className="px-12 py-12 select-none border border-cyan-400 hover:shadow-lg hover:shadow-cyan-400 transition duration-300 rounded-xl ">

            <div className="font-bold flex justify-center items-center text-3xl p-4">Sign in</div>

            <div className="p-4">
                <div className="space-y-4">
                    <div className="relative ">
                        <input placeholder="Username" type="text" className="bg-gray-900 transition duration-300 text-cyan-400 shadow border-b border-cyan-400 focus:text-gray-900 focus:bg-cyan-400 outline-none px-4 py-2 rounded-t" />
                    </div>
                    <div>
                        <input placeholder="Password" type="password" className="bg-gray-900 transition duration-300 text-cyan-400 shadow border-b border-cyan-400 focus:text-gray-900 focus:bg-cyan-400 outline-none px-4 py-2 rounded-t" />
                    </div>
                </div>
                <div className="flex flex-row justify-between py-2 text-sm ">
                    <div className="text-gray-400 cursor-pointer">Forgot Password</div>
                    <div className=" cursor-pointer text-sm">Signup</div>
                </div>
            </div>

            <div className="p-4 flex justify-start">
                <div className="flex justify-center items-center bg-cyan-900 hover:bg-cyan-400 active:bg-cyan-500 font-bold text-gray-900 px-8 py-2 rounded cursor-pointer">Login</div>
            </div>
        </div>
    </div>
}